<template>
    <div>
        <!-- 第二种方式:三元表达式 注意点：放在数组中，类名要用引号-->
        <p :class="[ useSmClass ? 'sm' : 'lg' ]" >三元表示式</p>

        <button @click="alterClass">三元表达式 切换class选择器样式</button>
    </div>
</template>

<script>
    export default {
        name: "TestCssClass2",
        data(){
            return{
                useSmClass:true
            }
        },
        methods:{
            alterClass(){
                if (this.useSmClass === false) {
                    this.useSmClass = true;
                } else {
                    this.useSmClass = false;
                }
            }
        }
    }
</script>

<style scoped>
    .sm {
        font-size: 15px;
    }

    .lg {
        font-size: 30px;
    }
</style>